import React from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
import { actionLogin } from '../../redux/login/login.redux.js';
import { Button, Form, Input, Popconfirm, Modal, message} from 'antd';
import Grid from '../../components/table/grid';
import { injectIntl } from 'react-intl';
import {sessionManager} from "../../utils/sessionStorage";


@connect(state => state.auth, {actionLogin})
@Form.create()
class CardList extends React.Component {

    constructor(Props){
        super(Props);
        this.onChange=this.onChange.bind(this);
        this.cancel = this.cancel.bind(this);
        this.state={
            selectUrl:'/report/departMent',
            refresh:0
        };
        const common = this.props.intl.messages.common;
        this.columns = [{
            title: common.username,
            dataIndex: 'account',
        }, {
            title: common.staffName,
            dataIndex: 'name',
        }, {
            title: common.AddTime,
            dataIndex: 'registTime',
        }, {
            title: common.status,
            dataIndex: 'statusCopy',
            render: (text, record) => (
                <span>
                    { this.getStatus(record.status)}
                </span>
            )
        }, {
            title: common.operation,
            key: 'action',
            render: (text, record) => (
                <span>
                    {
                        <Popconfirm title={`${common.needToCancelBinding}？`} okText={common.sure} onConfirm={() => this.bindCard({
                                cardId:this.props.cardId,
                                accountId:record.id,
                                phone: record.account
                            })} cancelText={common.cancel}>
                            <a>{common.bind}</a>
                        </Popconfirm>
                    }
                </span>
            )
        }],
        this.state = {
            params: {
                account:'',
                phone: ''
            },
            refresh: 0
        };
    }

    getStatus =(status) =>{
        const common = this.props.intl.messages.common;
        if(status===3){
            return <span style={{color:"red"}}>{common.disabled}</span>
        }
        if(status===2){
            return common.normal;
        }
        if(status===1){
            return common.waitConfirm
        }

    }

    /**
     * 绑卡
     * @param {*} values 
     */
    bindCard(values){
        console.log(values);
        const common = this.props.intl.messages.common;
        axios.post('/api/user/card/bind', {
            ...values
        }).then(res => {
            this.props.form.resetFields();
            this.props.close(true);
            if(res && res.code == 200){
                message.success(common.bindSuccessfully);
            }
        });				
    }

    /**解绑
     * @param {*} values 
     */
    unBindCard(values){
        const common = this.props.intl.messages.common;
        axios.post('api/user/card/unbind', {
            ...values
        }).then(res => {
            if(res && res.code == 200){
                message.success(common.unbindSuccessfully);
            }
            this.setState({
                refresh: this.state.refresh + 1
            });
        });	
    }
    
   /**
    * 暂时未使用
    * @param {*} value 
    * @param {*} dateString 
    */
    onChange(value, dateString) {
        console.log('From: ', value[0], ', to: ', value[1]);
        console.log('From: ', dateString[0], ', to: ', dateString[1]);    
    }

    /**
     * 查询接口
     * @param {*} value 
     */
    search(value){
        console.log(value);
        this.setState({
            params: {...value},
            refresh: this.state.refresh + 1
        });
    };

    /**
     * 关闭模态
     */
    cancel() {
		this.props.close();
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.visible){
           this.setState({
               refresh:this.state.refresh+1
           })
        }
    }

    render() {
        const common = this.props.intl.messages.common;
        return (
            <Modal
	          	title={common.bindStaff}
	          	visible={this.props.visible}
	          	onOk={this.ok}
	          	onCancel={this.cancel}
	          	okText={common.added}
                cancelText={common.close}
                width={'80%'}
                footer={[<div key={1} style={{height:22}}></div>]}
	        >
                <Input placeholder={common.username} id="accountx"   style={{width:160,marginRight:20}} />
                <Input placeholder={common.staffName} id="namex"   style={{width:160,marginRight:20}} />
                <Button type="primary"  style={{marginRight:20}} icon="search" onClick={() => this.search({
                             name:document.getElementById('namex').value,
                             account:document.getElementById('accountx').value
                         })}>{common.search}</Button>
                         <br/><br/>
                <Grid refresh={this.state.refresh} params={this.state.params} columns={this.columns} url="/api/user/unBindCard/qry" />
            </Modal>
        );      
    }
}
export default injectIntl(CardList);